<template>
  <div>
    <div class="show-title" >基础用法</div>
    <div class="show-list" v-for="(item, index) in list" :key="index">
      <Rain-Field 
        :name="item.name"
        :msg="item.msg" 
        :placeholder="item.placeholder"
        :type="item.type"
        :mold='item.mold'
        :maxlength="item.maxlength"
        :checkRule="item.checkRule"
        :isCheckRule="item.isCheckRule"
        v-model="item.value"
      ></Rain-Field>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {}
})
export default class Home extends Vue {
  //data
  list = [
    { name: "name",value:'',msg:'姓名', placeholder: "请填写姓名",type:'text',maxlength:'4',mold:'input',checkRule:'noEmpty',isCheckRule:false },
    { name: "age",value:'',msg:'年龄', placeholder: "请填写年龄",type:'number',maxlength:'2',mold:'input',checkRule:'noEmpty',isCheckRule:false },
    { name: "grade",value:'',msg:'班级', placeholder: "请选择 >",type:'text',maxlength:'5',mold:'select',checkRule:'noEmpty',isCheckRule:false },
    { name: "number",value:'',msg:'学号', placeholder: "请填写学号",type:'number',maxlength:'9',mold:'input',checkRule:'noEmpty',isCheckRule:false },
    { name: "sex",value:'',msg:'性别', placeholder: "请选择 >",type:'text',maxlength:'2',mold:'select',checkRule:'noEmpty',isCheckRule:false },
    { name: "phone",value:'',msg:'电话', placeholder: "请填写电话",type:'tel',maxlength:'11',mold:'input',checkRule:'phone',isCheckRule:true }
  ];
  //mounted
  mounted() {
    const background: any = document.querySelector("body");
    background.setAttribute("style", "background-color:#f6f6f6");
  }
  //destoryed
  destroyed() {
    const background: any = document.querySelector("body");
    background.setAttribute("style", "background-color:#ffffff");
  }
}
</script>
<style lang="scss" scoped>
$gray:#999999;
.show-title{
  text-align: left;
  font-size: 14px;
  padding: 16px;
  color: $gray;
}
.show-list{
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 4px 4px rgba($color: #cccccc, $alpha:0.1);
}
</style>
